<template>
    <view class="pb-safe-area">
        <view class="p-4 flex flex-column grid-gap-4">
            <view class="flex flex-center bg-bg-grey rounded-4 p-4">
                <view class="flex-1 flex flex-column grid-gap-4">
                    <text class="font-weight-600 h8 text-white">当前可用{{ WEBCONFIG.money_name }}</text>
                    <x-money type="danger" unit-type="danger" weight="bold" size="1" :money="USERINFO.integral" unit="">
                        <template #suffix>
                            <text class="h10 text-danger">{{ WEBCONFIG.money_unit_name }}</text>
                        </template>
                    </x-money>
                    <view class="flex flex-y-center">
                        <text class="h9 text-grey">累计充值{{ WEBCONFIG.money_name }}：</text>
                        <x-money type="danger" unit-type="danger" weight="bold" size="6" :money="USERINFO.integral_sum"
                            unit="">
                            <template #suffix>
                                <text class="h10 text-danger">{{ WEBCONFIG.money_unit_name }}</text>
                            </template>
                        </x-money>
                    </view>
                </view>
                <view class="flex flex-center" @click="$page.open('/pages/user/bill', true)">
                    <text class="text-grey h9">账单</text>
                    <uni-icons type="right" color="var(--xl-placeholder)"></uni-icons>
                </view>
            </view>
            <view class="grid-columns-4 grid-gap-4">
                <view class="grid-column-2 rounded-4 p-4 flex flex-column flex-center h-80px position-relative border"
                    v-for="(item, index) in mealList" :key="index"
                    :class="form.id == item.id ? 'bg text-white border-primary' : 'bg-bg-grey border-bg-grey'"
                    @tap="toSetMoney(item)">
                    <x-money type="white" unit-type="white" weight="bold" size="6" :precision="0" :money="Math.floor(item.money * WEBCONFIG.money_proportion)" unit="">
                        <template #prefix>
                            <text class="h10 text-white">{{ WEBCONFIG.money_name }}</text>
                        </template>
                        <template #suffix>
                            <text class="h10 text-white">{{ WEBCONFIG.money_unit_name }}</text>
                        </template>
                    </x-money>
                    <x-money type="danger" unit-type="danger" weight="bold" size="9" :money="item.money" unit="">
                        <template #prefix>
                            <text class="h10 text-danger">￥</text>
                        </template>
                        <template #suffix>
                            <text class="h10 text-danger">元</text>
                        </template>
                    </x-money>
                    <text class="give-money" v-if="item.give_money > 0">赠送{{ item.give_money * WEBCONFIG.money_proportion }}{{ WEBCONFIG.money_unit_name }}</text>
                </view>
                <view class="grid-column-2 rounded-4 p-4 flex flex-column flex-center h-80px border text-white"
                    :class="customRegister ? 'bg border-primary' : 'bg-bg-grey border-bg-grey'" @tap="toCustomRegister">
                    <text class="font-weight-600 h8">自定义充值</text>
                </view>
            </view>

            <view class="flex flex-column grid-gap-4 bg-bg-grey p-4 rounded-4" v-show="customRegister">
                <view class="flex flex-y-center grid-gap-2">
                    <text class="bg-primary rounded-4" style="height: 8px;width: 8px;"></text>
                    <text class="h8 font-weight-600 text-white">自定义充值</text>
                </view>
                <view class="flex flex-center bg rounded-round px-6">
                    <input type="number" placeholder="请输入充值金额" class="p-4 flex-1 font-weight-600 h6 text-danger" placeholder-class="h9 text-placeholder font-weight-500"
                        v-model="form.money" maxlength="8">
                    <text class="h9 font-weight-600 text-danger">元</text>
                </view>
                <view class="flex flex-center" v-if="form.money > 0">
                    <x-money type="danger" unit-type="danger" weight="bold" size="1" :precision="0"
                        :money="Math.floor(form.money * WEBCONFIG.money_proportion)" unit="">
                        <template #prefix>
                            <text class="h10 text-danger">得</text>
                        </template>
                        <template #suffix>
                            <text class="h10 text-danger">{{ WEBCONFIG.money_unit_name }}</text>
                        </template>
                    </x-money>
                </view>
            </view>

            <view class="flex flex-column grid-gap-2">
                <text v-if="WEBCONFIG.money_register_tips" class="h9 text-placeholder">{{ WEBCONFIG.money_register_tips
                    }}</text>
                <view class="flex flex-y-center">
                    <text class="h9 text-grey">请阅读</text>
                    <text class="h9 text-primary"
                        @tap="$page.open('/pages/article/content?alias=recharge_notice')">《充值须知》</text>
                    <text class="h9 text-primary"
                        @tap="$page.open('/pages/article/content?alias=pay_agreement')">《支付协议》</text>
                </view>
            </view>
            <view class="flex">
                <view class="flex-1 flex flex-center rounded-round py-6 bg-primary text-white" @tap="submit">
                    <text class="font-weight-600 h9">确认充值</text>
                </view>
            </view>
        </view>
        <x-pay ref="xPayRef" @success="getUserInfo" auto-hide-tab-bar />
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useWebConfigStore, useUserStore, useRefs } from "@/stores";
import { $page, $message, $http } from "@/utils";
import { getUserInfo } from '@/utils/api';
const WebConfigStore = useWebConfigStore();
const { WEBCONFIG } = useRefs(WebConfigStore);
const UserStore = useUserStore();
const { USERINFO } = useRefs(UserStore);
const xPayRef = ref();
const customRegister = ref(false);
const form = ref({
    id: '',
    type: 'money',
    pay_type: '',
    platform: '',
    code: '',
    money: ''
});
const mealList = ref([]);
const getList = () => {
    $http.get('MoneyRegister/index').then((res: any) => {
        if (res.code === $http.ResponseCode.SUCCESS) {
            mealList.value = res.data;
            if (mealList.value.length > 0) {
                form.value.id = mealList.value[0].id;
                form.value.money = mealList.value[0].money;
            }
        }
    })
}
const submit = () => {
    if (!form.value.id) {
        const money_min_register = Number(WEBCONFIG.value.money_min_register);
        if (money_min_register && form.value.money < money_min_register) {
            return $message.error('最低充值' + WEBCONFIG.value.money_min_register + '元');
        }
        if (!form.value.money) {
            return $message.error('请输入充值金额');
        }
    }
    xPayRef.value.show({
        type: 'register',
        alias_id: form.value.id,
        price: form.value.money,
        title: '充值'
    });
}
const toSetMoney = (item: any) => {
    customRegister.value = false;
    form.value.id = item.id;
    form.value.money = item.money;
}
const toCustomRegister = () => {
    form.value.money = '';
    form.value.id = '';
    customRegister.value = true
}

onLoad(() => {
    getList();
})
</script>
<style lang="scss" scoped>
.h-80px {
    height: 100px;
}
.bg-191919 {
    background-color: #191919;
}
.give-money{
	position: absolute;
	top: 0;
	right: 0;
	background-color: #191919;
	color:#4C402E;
	font-size: 10px;
	padding: 2px 6px;
	border-radius: 0 16rpx 0 16rpx;
}
</style>
